<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GalleryView - Default Demo</title>

<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/jq/js/jquery.timers-1.2.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/jq/js/jquery.easing.1.3.js"></script>

<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/jq/js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet"
	href="<%=request.getContextPath()%>/css/jquery.galleryview-3.0-dev.css" />

<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<script type="text/javascript">
	$(function() {
		$('#myGallery').galleryView({
			enable_overlays: true
		}
		);
	});
</script>
</head>

<body>
	<div
		style="position: absolute; top: 50%; left: 50%; margin-left: -415px; margin-top: -200px; border: solid; border-color: black;">
		<ul id="myGallery">
			<li><img src="<%=request.getContextPath()%>/storia1/os1.jpg"
				alt="Lone Tree Yellowstone"/></li>
			<li><img src="<%=request.getContextPath()%>/storia1/os2.jpg"
				alt="Lone Tree Yellowstone" /></li>
			<li><img src="<%=request.getContextPath()%>/storia1/os3.jpg"
				alt="Lone Tree Yellowstone" /></li>
			<li><img src="<%=request.getContextPath()%>/storia1/os4.jpg"
				alt="Lone Tree Yellowstone" /></li>
		</ul>
	</div>
</body>
</html>
